<template>
  <div>
    <!-- columns 第一项必须fixed 否则排序会乱 -->

    <!-- 在视图中的用法
    const columns = [
    {
    label: "",
    prop: "class1",
    width: "100",
    align: "center",
    fixed: 'left',
    slot: 'class1'
    },
    {
    label: "指标名称",
    prop: "index_name",
    width: "100",
    align: "center"
    }]
    <BaseColumns :columns="columns">
      <template v-slot:class1="{ scope }">
        <span>{{scope.row.class1}}</span>
      </template>
    </BaseColumns> -->

    <el-table-column :prop="item.prop"
                     :label="item.label"
                     v-for="(item, index) in columns"
                     :key="index"
                     :width="item.width"
                     :minWidth="item.minWidth"
                     :align="item.align"
                     :sortable="item.sortable"
                     :fixed="item.fixed"
                     :render-header="item.renderHeader"
                     :show-overflow-tooltip="item.tooltip">

      <template slot-scope="scope">
        <template v-if="item.slot">
          <slot :name="item.slot"
                v-bind:scope="{...scope}"></slot>
        </template>

        <template v-else>
          <span>{{ scope.row[item.prop] || ""}}</span>
        </template>
      </template>

    </el-table-column>
  </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => {
        return []
      }
    }
  },

}
</script>

<style>
</style>